<style scoped>
@import "../assets/css/header.css";
/**/
/*全局min-width:1280px;overfloow:auto*/
.outer {
  height: 100%;
  min-height: 1200px;
  background-color: #060a27;
  display: block;
  min-width: 1600px;
  /* overflow: auto; */
  background-image: url(/static/img/indexBJ.jpg);
}
header {
  background-image: none;
  background-color: #060a27 !important;
  text-align: center;
}
.outer-div {
  min-width: 1280px;
  overflow: auto;
  background-color: #333;
}
.logo {
  color: #7adefe;
  font-size: 20px;
  font-weight: bold;
  float: unset;
}
.el-menu-demo {
  min-width: 1080px;
  width: 100%;
  position: absolute;
  top: 0;
}
.box-card {
  /* width: 400px; */
  margin-top: 30px;
  height: 300px;
  border: 1px solid #060a27;
  box-shadow: #060a27;
}
.section-main {
  /* height: 100%; */
  min-height: 700px;
  overflow: hidden;
}
.left-aside,
.right-aside {
  width: 350px !important;
}
.index-main {
  width: 55%;
  min-width: 860px;
  max-width: 1080px;
  height: 635px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 50px;
}
.left-aside {
  margin-top: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}
.right-aside {
  margin-top: 50px;
  position: absolute;
  top: 30px;
  right: 10px;
}
.warning {
  text-align: center;
}
.warning-div {
  display: inline-block;
}
.warning-div:hover {
  cursor: pointer;
}
.warning-div:not(:first-child) {
  margin-left: 20px;
}
/* .warning-river:hover{
  cursor: pointer;
} */
.warning-title {
  color: #fff;
  font-size: 18px;
}
.warning-data {
  color: #7adefe;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
/*卡片样式*/
.box-card >>> .el-card__header {
  border-bottom: none;
}
.box-card >>> .el-card__body {
  background: transparent;
  padding-top: 0;
}
.box-card >>> .el-table th {
  background: transparent;
  text-align: center;
}
.box-card >>> .el-input__inner {
  background: #132244;
  border: none;
  color: #fff;
}
.box-card >>> .popper__arrow {
  display: none;
}
.box-card >>> .el-table__body-wrapper {
  background: transparent;
}
.box-card {
  background: transparent;
  border: 1px solid #1f3c76;
  box-shadow: 1px 1px 5px #1f3c76 !important;
}
.clearfix span {
  color: #03d1c7;
  font-size: 16px;
  font-weight: bold;
}
.clearfix .span-tag {
  display: inline-block;
  width: 5px;
  height: 15px;
  background-color: #03d1c7;
  margin-right: 10px;
}
.clearfix >>> .popper__arrow {
  display: none;
}
.clearfix >>> .el-select {
  padding: 20px 0;
}
/*footer*/
.index-footer {
  margin-bottom: 5%;
  overflow: hidden;
  padding: 0 10px;
}
.water-level,
.rain-trend {
  position: relative;
  display: inline-block;
  width: 48%;
  height: 350px;
  border: 1px solid #1f3c76;
  box-shadow: 1px 1px 5px #1f3c76 !important;
}
.water-level {
  float: left;
}
.rain-trend {
  float: right;
}
.water-level .span-tag,
.rain-trend .span-tag {
  position: absolute;
  top: 15px;
  left: 20px;
  display: inline-block;
  width: 5px;
  height: 15px;
  background-color: #03d1c7;
}
.sub-title {
  color: #fff;
  text-align: center;
}
/*table样式*/
.box-card >>> .has-gutter .cell {
  color: #edebee;
}
.box-card >>> tbody {
  color: #edebee;
}
.box-card >>> .el-table__row {
  background: transparent;
  text-align: center;
}
.box-card >>> .el-table__row:hover {
  cursor: pointer;
}
.box-card >>> .el-table__row:hover {
  background: #1f3c76 !important;
}
.box-card >>> .el-table__row--striped {
  background: #1f3c76 !important;
}
/*水系样式*/
.water-sys-detail {
  overflow: auto;
  height: 180px;
  color: #edebee;
}
.water-sys-detail ::-webkit-scrollbar-thumb {
  width: 8px;
  height: 8px;
  background-color: #a8a8a8;
  border-radius: 10px;
}
.water-sys-detail div {
  /* margin-top: 10px; */
  padding: 5px;
}
.water-sys-detail div:hover {
  cursor: pointer;
  background-color: #1f3c76;
}
.water-sys-detail span {
  color: #edebee;
  font-weight: normal;
}
/*湖泊水情分页*/
.box-card >>> .el-pagination {
  text-align: center;
  margin-top: 10px;
}
.box-card >>> .el-pager li {
  background: transparent;
}
/*表格文本样式*/
.box-card >>> .el-table__body-wrapper .cell {
  white-space: nowrap;
}
/*dialog样式*/
.warning-dialog >>> .el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
</style>
<template>
  <el-container class="outer">
    <!--顶部菜单-->
    <el-header>
      <div class="logo">武汉水务监测信息系统</div>
      <el-menu :router="true" class="el-menu-demo" mode="horizontal">
        <el-button @click="exit()" type="text" style="margin-right:2%;float:right;color: #fff;line-height: 34px;display: inline-block;margin-left: 25px;"><img src="./../assets/img/exit-01.svg" class="nav-img" style="top: 5px;" />退出</el-button>
        <!-- <el-menu-item index="" style="margin-left:2%;float:right;"><img src="./../assets/img/xtgl.svg" class="nav-img" />系统管理</el-menu-item> -->
        <!-- <el-menu-item index="/App/ReportExport" style="margin-left:2%;float:right;"><img src="./../assets/img/yxjc.svg" class="nav-img" />实时雨量</el-menu-item> -->
        <el-menu-item index="/App/Moint" style="margin-left:2%;float:right;"><img src="./../assets/img/ssjc.svg" class="nav-img" />站点监测</el-menu-item>
        <el-menu-item index="/App/RainMonitor" :route="{ path: '/App/MapPage', query: { type: 'rain', }}" style="margin-left:2%;float:right;"><img src="./../assets/img/ssjc.svg" class="nav-img" />实时雨量</el-menu-item>
        <el-menu-item index="/App/MapPage" :route="{ path: '/App/MapPage', query: { type: 'mapPage', }}" style="margin-left:2%;float:right;"><img src="./../assets/img/ssjc.svg" class="nav-img" />实时水情</el-menu-item>
        <el-menu-item index="/App/indexPage" style="margin-left:2%;float:right;"><img src="./../assets/img/ssjc.svg" class="nav-img" />首页</el-menu-item>
      </el-menu>
    </el-header>
    <div class="section-main">
      <!--左边aside-->
      <el-aside class="left-aside">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><span class="span-tag"></span>河道水情预警</span>
          </div>
          <el-table :stripe='this.stripe' :data="rivers" size='small' height="200" @row-click="riverDrawDot">
            <el-table-column prop="STNM" label="站名" width="80" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="LE" label="水位" width="80">
            </el-table-column>
            <el-table-column prop="YMDHM" label="日期" :formatter="timeFormatter">
            </el-table-column>
          </el-table>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><span class="span-tag"></span>湖泊水情预警</span>
          </div>
          <el-table :stripe='this.stripe' :data="lakes['list']" size='small' height="200" @row-click="lakeDrawDot">
            <el-table-column prop="STNM" label="站名" width="80" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="LE" label="水位" width="80">
            </el-table-column>
            <el-table-column prop="YMDHM" label="日期" :formatter="timeFormatter">
            </el-table-column>
          </el-table>
          <el-pagination small layout="prev, pager, next" :total='this.total' :current-page='this.page' :page-size='this.pagesize' @current-change='handleCurrentChange'>
          </el-pagination>
        </el-card>
      </el-aside>
      <!--中间地图-->
      <el-main class="index-main">
        <div class="warning">
          <div class="warning-div" @click="getWarning('rivers')">
            <div class="warning-title">河道实时预警</div>
            <div class="warning-data">{{this.early.river}}个</div>
          </div>
          <div class="warning-div" @click="getWarning('lakes')">
            <div class="warning-title">湖泊实时预警</div>
            <div class="warning-data">{{this.early.lake}}个</div>
          </div>
          <div class="warning-div" @click="getWarning('reservoir')">
            <div class="warning-title">水库实时预警</div>
            <div class="warning-data">{{this.early.reservoir}}个</div>
          </div>
          <div class="warning-div" @click="getWarning('waterLogging')">
            <div class="warning-title">渍水实时预警</div>
            <div class="warning-data">{{this.early.waterlogging}}个</div>
          </div>
          <el-dialog class="warning-dialog" :title="this.warningTitle" :visible.sync="showWarning">

          </el-dialog>
        </div>
        <!-- <BaseMap ref="map" :controls="[]" :max-zoom="10" :base-map-layers="[indexMapBaiduLayer]"/> -->
        <BaseMap ref="map" :controls="[]" :max-zoom="16" :base-map-layers="[planLayerMap]" />
      </el-main>
      <!--右边aside-->
      <el-aside class="right-aside">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><span class="span-tag"></span>排水水系</span>
            <el-select v-model="waterSysCode" placeholder="请选择" @change="currentSel">
              <el-option v-for="item in options" :key="item.MID" :label="item.MNAME" :value="item.MID">
              </el-option>
            </el-select>
            <div class="water-sys-detail">
              <div class="tt11" @click="postArrIndex(arrIndex)" v-for="(item,arrIndex) in waterSystem" :key="arrIndex">
                <span v-for="(item2, index1) in item" :key="item2.MID">
                  {{item2.RNAME}}{{(item.length-1)!==index1?'-':''}}
                </span>
              </div>
            </div>
          </div>
          <!-- <div v-for="(o,key) in waterSystem" :key="o" class="text item" @click="pointdepiction(o,key)">
            {{ o }}
          </div> -->
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><span class="span-tag"></span>雨量预警</span>
          </div>
          <el-table :stripe='this.stripe' :data="rains" size='small' height="200" @row-click="rainDrawDot">
            <el-table-column prop="STNM" label="站名" width="80" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="LE" label="水位" width="80">
            </el-table-column>
            <el-table-column prop="YMDHM" label="日期" :formatter="timeFormatter">
            </el-table-column>
          </el-table>
        </el-card>
      </el-aside>
    </div>
    <!--底部图表-->
    <!--包含底部的版权声明等相关信息-->
    <el-footer class="index-footer" style="height:auto;">
      <!-- <DateDataLineChart :dates='dates' :datas='datas2' :datas1='datas1'></DateDataLineChart> -->
      <div class="water-level">
        <span class="span-tag"></span>
        <WaterLevel :dates='dates' :datas='datas2' :datas1='datas1'></WaterLevel>
        <div class="sub-title">2018年-2019年水位线对比</div>
      </div>
      <div class="rain-trend">
        <span class="span-tag"></span>
        <RainTrend :rainDate='rainDate' :rain2017='rain2017' :rain2018='rain2018'></RainTrend>
        <div class="sub-title">2018年-2019年雨量走势图</div>
      </div>
    </el-footer>
    <!-- <div class="test1234">
      <el-input auto-complete="off" ref="companyStyle" v-bind:style="{width: inputStyWidth+'px'}"></el-input>
    </div> -->
  </el-container>
</template>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
<script>
import BaseMap from './map/common-map/base-map'
import DateDataLineChart from './map/DateDataLineChart'
import WaterLevel from './map/WaterLevel'
import RainTrend from './map/RainTrend'
import { polygonOptions } from './config/index2.js'
import { mapGetters } from 'vuex'
import Vectorlayer from 'ol/layer/vector'
import VectorSource from 'ol/source/vector'
import GeoJSON from 'ol/format/GeoJSON'
import Text from 'ol/style/Text'
import Fill from 'ol/style/fill'
import Stroke from 'ol/style/stroke'
import Style from 'ol/style/style'
import Icon from 'ol/style/Icon'

// 单独引入
// import { indexMapBaiduLayer } from './map/mapSource.js'
import { planLayerMap } from './map/mapSource.js'
const planImgStyle = function (icon, name, feature, resolution, level = 80) {
  // console.log(icon)
  return new Style({
    // 图标样式
    image: new Icon({
      anchorXUnits: 'pixels',
      anchorYUnits: 'pixels',
      anchor: [220, 315],
      src: `/static/img/map.svg`//
    }),
  })
}
// 定义图层上的图标相关样式
const pointFeatureStyle = function (icon, name, feature, resolution, level = 80) {
  let url = ''
  if (feature.values_.type) {
    url = `${feature.get('type')}`

  } else {
    url = 5
  }
  return new Style({
    // 图标样式
    image: new Icon({
      anchorXUnits: 'pixels',
      anchorYUnits: 'pixels',
      anchor: [17, 17],
      // 可用if判断type值来区别不同的图标或者直接用字符串拼接,通过更改图标名称
      src: `/static/icon/` + url + `.png`// `${feature.get('type')}`
      // src: `/static/img/map.svg`//
    }),
    // 文字样式
    text: new Text({
      offsetY: -30,
      font: '15px 微软雅黑',
      fill: new Fill({ color: '#0057b1' }),
      stroke: new Stroke({ color: '#ffffff', width: 2 }),
      text: resolution < level ? name : ''
    }),
    // 填充样式
    fill: new Fill({
      color: [0, 0, 255, 0.2]
    })
  })
}

export default {
  // 注入reload, AppVue中注册
  inject: ['reload'],
  data() {
    return {
      inputStyWidth: '',
      vector: null,
      vector1: null,
      vectorLine: null,
      // indexMapBaiduLayer,
      planLayerMap,
      stripe: true,
      waterSysCode: '',
      waterSysCodeChild: '',
      options2: [],
      options: [],
      waterSystem: {},
      dates: [],
      datas1: [],
      datas2: [],
      rainDate: [],
      rain2017: [],
      rain2018: [],
      year: '',
      early: {},
      rivers: [],
      rains: [],
      total: 0,
      pagesize: 4,
      page: 1,
      lakes: [],
      widthShow: '435',
      tabActiveName: '',
      openMesageLoading: false,
      fromCheckboxIsShow: true,
      fromCheckboxIsShow1: true,
      baseMesgIsShow: false,
      detailData: {
        row: {},
        tabs: {},
        id: '',
        option: {}
      },
      showWarning: false,
      warningTitle: '',
      DrawDot: false,//描单点
      singlePoint: ''
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      // 标签卡数组
      'getTabArray',
      // 获取生成图层多选框的数据
      'getCheckboxArray',
      // 获取详情要显示的组件
      'getLayerDetailTabsById',
      // 获取选中点携带的数据
      'selectedFeatureValues',
      'getLayerOption',
      'getBaseMapLayers',
      'getCheckboxArray',
      'getLayerArray',
      'getMapObj'
    ])
  },
  beforeCreate() {
    // 修改全局主题为地图专用
    // document.body.className = 'map-dedicated-ele'
  },

  mounted: function () {
    window.onresize = function () {
      // completed.resize()
    }
    // 修改全局主题为地图专用
    // document.body.className = 'map-dedicated-ele'
    // this.currentSel()
    this.getData()
    this.newAddBtn()

  },
  distroyed: function () {
  },
  methods: {
    // 此处设置中间main的动态宽度，记得在watch中监听改变时的变化
    newAddBtn() {
      let _this = this
      this.$nextTick(function () {
        // _this.inputStyWidth = _this.$refs.companyStyle.$el.clientWidth + 'px'
        // console.log(_this.inputStyWidth)
        _this.inputStyWidth = 60
        // 中间main的宽度=页面宽度-左aside-右aside的宽度-x(为不定的边距)
      })
    },
    mapReady() {
      let _this = this
      if (_this.vector) {
        _this.$refs['map'].mapObj.removeLayer(_this.vector)
      }
      if (_this.vectorLine) {
        _this.$refs['map'].mapObj.removeLayer(_this.vectorLine)
      }
      _this.vectorSource = new VectorSource({
        format: new GeoJSON({
          extractStyles: false
        }),
        // 重写加载器
        loader: function (extent, resolution, projection) {
          // console.log(_this.waterSysCodeChild)
          // 首页描点
          _this.$getJSON(`/ssjc/RiverSystem/displayPlace`, {
            MID: _this.waterSysCode,
            SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
            isGeo_: true,
            latitudeKey_: 'lat',
            longitudeKey_: 'lng',
            name: '',
            typeKey_: 'river'
          }).then(json => {
            let f = _this.vectorSource.getFormat()
            // 解析器解析GeoJSON报文
            let features = f.readFeatures(json, { featureProjection: projection })

            f.readProjection(json)
            f.getLastExtent()
            // _this.vectorSource.removeFeatures(features)
            _this.vectorSource.addFeatures(features)
          }).catch(e => {
            _this.vectorSource.removeLoadedExtent(extent)
          })
          // 首页描点连线
          _this.$getJSON(`/ssjc/RiverSystem/displayLine`, {
            MID: _this.waterSysCode,
            SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
            isGeo_: true,
            latitudeKey_: 'lat',
            longitudeKey_: 'lng',
            name: '',
            typeKey_: 'river'
          }).then(json => {
            let f = _this.vectorSource.getFormat()
            // 解析器解析GeoJSON报文
            let features = f.readFeatures(json, { featureProjection: projection })

            f.readProjection(json)
            f.getLastExtent()
            // _this.vectorSource.removeFeatures(features)
            _this.vectorSource.addFeatures(features)
          }).catch(e => {
            _this.vectorSource.removeLoadedExtent(extent)
          })
          // 预警描点 河道
          console.log(_this.warningTitle)
          if (_this.warningTitle === "rivers") {
            _this.$getJSON(`/ssjc/riverEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild,
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 湖泊
          if (_this.warningTitle === "lakes") {
            _this.$getJSON(`/ssjc/lakeEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              // console.log(json)
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })

              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 水库
          if (_this.warningTitle === "reservoir") {
            _this.$getJSON(`/ssjc/reservoirEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              // console.log(json)
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // 预警描点 渍水
          if (_this.warningTitle === "waterLogging") {
            _this.$getJSON(`/ssjc/WaterloggingEarlyWarningPlace`, {
              MID: _this.waterSysCode,
              SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
              isGeo_: true,
              latitudeKey_: 'lat',
              longitudeKey_: 'lng',
              name: '',
              typeKey_: 'river'
            }).then(json => {
              let f = _this.vectorSource.getFormat()
              // 解析器解析GeoJSON报文
              let features = f.readFeatures(json, { featureProjection: projection })
              f.readProjection(json)
              f.getLastExtent()
              // _this.vectorSource.removeFeatures(features)
              _this.vectorSource.addFeatures(features)
            }).catch(e => {
              _this.vectorSource.removeLoadedExtent(extent)
            })
          }
          // //河道预警，单点描绘
          // if(_this.single==='river'){
          //   _this.$getJSON(`/ssjc/River/RiverLiveQueryPlace`, {
          //     MID: _this.waterSysCode,
          //     SUBORDINATEID: _this.waterSysCodeChild, 
          //     isGeo_: true,
          //     latitudeKey_: 'lat',
          //     longitudeKey_: 'lng',
          //     name: '',
          //     typeKey_: 'river',
          //     STNM:_this.singlePoint
          //   }).then(json => {
          //     let f = _this.vectorSource.getFormat()
          //     // 解析器解析GeoJSON报文
          //     let features = f.readFeatures(json, { featureProjection: projection })

          //     f.readProjection(json)
          //     f.getLastExtent()
          //     // _this.vectorSource.removeFeatures(features)
          //     _this.vectorSource.addFeatures(features)
          //   }).catch(e => {
          //     _this.vectorSource.removeLoadedExtent(extent)
          //   })
          // }
          // //湖泊预警，单点描绘
          // if(_this.single==='lake'){
          //   _this.$getJSON(`/ssjc/Lake/LakeLiveQueryPlace`, {
          //     MID: _this.waterSysCode,
          //     SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
          //     isGeo_: true,
          //     latitudeKey_: 'lat',
          //     longitudeKey_: 'lng',
          //     name: '',
          //     typeKey_: 'river',
          //     STNM:_this.singlePoint
          //   }).then(json => {
          //     let f = _this.vectorSource.getFormat()
          //     // 解析器解析GeoJSON报文
          //     let features = f.readFeatures(json, { featureProjection: projection })

          //     f.readProjection(json)
          //     f.getLastExtent()
          //     // _this.vectorSource.removeFeatures(features)
          //     _this.vectorSource.addFeatures(features)
          //   }).catch(e => {
          //     _this.vectorSource.removeLoadedExtent(extent)
          //   })
          // }
          // //雨量预警，单点描绘
          // if(_this.single==='rain'){
          //   _this.$getJSON(`/ssjc/Rain/rainLiveQueryPlace`, {
          //     MID: _this.waterSysCode,
          //     SUBORDINATEID: _this.waterSysCodeChild, // _this.waterSysCodeChild
          //     isGeo_: true,
          //     latitudeKey_: 'lat',
          //     longitudeKey_: 'lng',
          //     name: '',
          //     typeKey_: 'river',
          //     STNM:_this.singlePoint
          //   }).then(json => {
          //     let f = _this.vectorSource.getFormat()
          //     // 解析器解析GeoJSON报文
          //     let features = f.readFeatures(json, { featureProjection: projection })

          //     f.readProjection(json)
          //     f.getLastExtent()
          //     // _this.vectorSource.removeFeatures(features)
          //     _this.vectorSource.addFeatures(features)
          //   }).catch(e => {
          //     _this.vectorSource.removeLoadedExtent(extent)
          //   })
          // }
        }
      })
      //此处可新增规划局地图
      let vector1 = new Vectorlayer({
        source: this.vectorSource,
        style:
          function (resolution) {
            return planImgStyle(
              // 图标
              '',
              // 显示文字
              // feature.get('rname'),
              // // // 要素
              // feature,
              // // 缩放
              resolution
            )
          }
      })

      // 新建矢量图层，描点
      let vector = new Vectorlayer({
        source: this.vectorSource,
        style:
          function (feature, resolution) {
            return pointFeatureStyle(
              // 图标
              '',
              // 显示文字
              feature.get('rname'),
              // // 要素
              feature,
              // 缩放
              resolution
            )
          }
      })
      let vectorLine = new Vectorlayer({
        source: this.vectorSource
      })
      _this.vector = vector
      _this.vectorLine = vectorLine
      // _this.vector1 = vector1
      _this.$refs['map'].mapObj.addLayer(vector)
      _this.$refs['map'].mapObj.addLayer(vectorLine)
      _this.$refs['map'].mapObj.addLayer(vector1)


    },
    pointdepiction(o, key) {
      this.$store.dispatch('createPolygonLayers', polygonOptions, o)
      alert(key)
    },
    currentSel(selVal) {
      // 水系详情
      this.$postJSON('/ssjc/RiverSystem/findListBYmId', 'MID=' + this.waterSysCode).then(data => {
        this.waterSystem = data
        let obj = {}
        data.forEach(el => {
          let itemName = el['SUBORDINATEID']
          if (!obj[itemName]) {
            obj[itemName] = []
          }
          obj[itemName].push(el)
        })
        this.waterSystem = obj
        this.waterSysCodeChild = Object.keys(obj)[0]
        // console.log(this.waterSysCodeChild)
      })
    },
    handleCurrentChange(page) {
      this.$postJSON('/ssjc/lakeYj', 'page=' + page).then(data => {
        this.total = data.total
        this.lakes = data
      })
    },
    getData() {
      // 初始化的时候修改图层缩放比例
      this.$refs['map'].mapObj.getView().animate({ zoom: 9 })
      // 水系 
      this.$postJSON('/ssjc/RiverSystem/findList').then(data => {
        this.options = data
        // 设置默认值
        this.waterSysCode = data[0].MID
      })
      // 河道水情预警
      this.$postJSON('/ssjc/riverYj').then(data => {
        this.rivers = data
      })
      // 湖泊水情预警
      this.$postJSON('/ssjc/lakeYj').then(data => {
        this.total = data.total
        this.lakes = data
      })
      // 雨量预警/ssjc/RainYj
      this.$postJSON('/ssjc/RainYj').then(data => {
        this.rains = data
      })
      // 预警信息
      this.$postJSON('/ssjc/YJXX').then(data => {
        this.early = data
      })
      // 水位线折线区域图 /ssjc/dataList
      for (let i = 0; i < 12; i++) {
        this.dates.push(1 + i + '月')
        this.rainDate.push(1 + i + '月')
      }
      this.$postJSON('/ssjc/Statistics/RiverStatistics', { YEAR: '2019', STCD: '0161610010' }).then(data => {
        // this.$postJSON('/ssjc/dataList').then(data => {
        // let month = new Date().getMonth() + 
        data.forEach(el => {
          this.datas1.push(el['LE'])
        })
      })
      this.$postJSON('/ssjc/Statistics/RiverStatistics', { YEAR: '2018', STCD: '0161610010' }).then(data => {
        data.forEach(el => {
          this.datas2.push(el['LE'])
        })
      })
      // 雨量图 /ssjc/Rain/rainList
      this.$postJSON('/ssjc/Statistics/RainStatistics', { YEAR: '2019', STCD: 'R420106101' }).then(data => {
        // this.$postJSON('/ssjc/Rain/rainList').then(data => {
        data.forEach(el => {
          // let month = new Date(el['YMDHM']).getMonth() + 1
          // this.rainDate.push(month + '月')
          this.rain2018.push(el['SR'])
        })
      })
      this.$postJSON('/ssjc/Statistics/RainStatistics', { YEAR: '2018', STCD: 'R420106101' }).then(data => {
        data.forEach(el => {
          this.rain2017.push(el['SR'])
        })
      })
    },
    timeFormatter(row, column, cellValue, index) {
      // console.log(cellValue)
      if (cellValue) {
        return new Date(cellValue).format('yyyy-MM-dd')
      }
      return ''
    },
    exit() {
      this.logout()
    },
    postArrIndex(waterSysCodeChild) {
      let _this = this
      _this.$refs['map'].mapObj.getView().animate({ zoom: 16 })
      this.waterSysCodeChild = waterSysCodeChild
      // 首页地图描点
    },
    // 预警相关的请求
    // 预警描点
    getWarning(title, waterSysCodeChild) {
      let _this = this
      if (title === "rivers") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
        this.warningTitle = "rivers"
        this.mapReady()
      }
      if (title === "lakes") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
        this.warningTitle = "lakes"
        this.mapReady()
      }
      if (title === "reservoir") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
        this.warningTitle = "reservoir"
        this.mapReady()      }
      if (title === "waterLogging") {
        _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
        this.warningTitle = "waterLogging"
        this.mapReady()      }
      // this.showWarning = true
    },
    riverDrawDot(row, event, column) {
      this.warningTitle = ''
      this.DrawDot = true
      this.single = 'river'
      this.singlePoint = row['STNM']
      let _this = this
      _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
      this.mapReady()
    },
    lakeDrawDot(row, event, column) {
      this.warningTitle = ''
      this.DrawDot = true
      this.single = 'lake'
      this.singlePoint = row['STNM']
      let _this = this
      _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
      this.mapReady()
    },
    rainDrawDot(row, event, column) {
      this.warningTitle = ''
      this.DrawDot = true
      this.single = 'rain'
      this.singlePoint = row['STNM']
      let _this = this
      _this.$refs['map'].mapObj.getView().animate({ zoom: 10 })
      //  this.warningTitle = "waterLogging"
      this.mapReady()
    }
  },
  watch: {
    waterSysCode() {
      this.currentSel()
    },
    waterSysCodeChild() {
      //
      // console.log(this.waterSysCodeChild)
      this.mapReady()
    }
  },
  // 组件销毁时
  destroyed() {

  },
  // 注册组件
  components: {
    // 基础地图封装组件
    BaseMap,
    DateDataLineChart: DateDataLineChart,
    WaterLevel: WaterLevel,
    RainTrend: RainTrend
  },
  // 组建接受的传入参数
  props: []
}
</script>
